<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg width="500px" height="500px">
      <rect x="0" y="0" width="100" height="100" fill="#feac5e">
        <!-- 动画 -->
        <!-- <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> -->
        <animate attributeName="width" from="0" to="500" dur="2s" repeatCount="indefinite" />
      </rect>
    </svg>

    <svg width="500px" height="500px">
      <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
        <!-- <animate>标签对 CSS 的transform属性不起作用，如果需要变形，就要使用<animateTransform>标签 -->
        <animateTransform
          attributeName="transform"
          type="rotate"
          begin="0s"
          dur="10s"
          from="0 200 200"
          to="360 400 400"
          repeatCount="indefinite"
        />
      </rect>
    </svg>
  </body>
</html>
